{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/system_setup/js/base.js"></script>

{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .seal_card_one {
            width: 32%;height: 220px;border-radius: 8px;border: #cfcfcf solid 1px;display: inline-block;vertical-align: top;padding-left: 5px;margin-top: 10px;
        }
        .seal_card_two {
            width: 40%;height: 180px;display: inline-block;vertical-align: top;margin-top: 20px;text-align: center;
        }
        .img_card {
            width: 180px;height: 180px;vertical-align: top;
        }
        .seal_card_three {
            height: 180px;display: inline-block;vertical-align: top;margin-top: 20px;border: #cccccc solid 1px;margin-left: 10px;
        }
        .seal_card_four {
            width: 50%;height: 180px;display: inline-block;vertical-align: top;margin-top: 20px;margin-left: 10px;line-height: 30px;letter-spacing: 1.5px;overflow: auto;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline" style="background: white;border-bottom: #cfcfcf 1px solid;">
        <div style="width: 50%;height: 100%;float: left;margin-left: 15px;">
            <input type="text" id="contract" value="{{ contract }}" style="width: 250px;height: 30px;margin-top: 5px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;border: #00a0e9 solid 1px;display: inline-block;vertical-align: top;padding-left: 0.5%;">
            <button style="display: inline-block;vertical-align: top;width: 80px;height: 30px;line-height: 30px;margin-top: 5px;background: #00a0e9;color: white;border-top-right-radius: 3px;border-bottom-right-radius: 3px;text-align: center;border: #00a0e9;letter-spacing: 5px;margin-left: -5px;" onclick="search_contract()">搜索</button>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button"
                    class="btn btn-default add-station" onclick="online_tag()">新增
            </button>
        </div>
    </div>

    <div id="new_models1" class="shade">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 700px;height: 600px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box"
                     style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">新增合同</h5>
                    <span onclick="close_models()"
                          style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                            class="iconfont icon-quchu"></i></span>
                </div>
                <hr>
                <div style="height: 500px;width: 100%;padding-top: 2%;padding-left: 2%;">
                    <div style="width: 100%;">
                        <label for="" style="width: 12%;text-align: right;">合同名称：</label>
                        <input id="contract_name" type="text" style="width: 78%;">
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <label for="" style="width: 12%;text-align: right;">生&nbsp;&nbsp;效&nbsp;日：</label>
                        <input type="text" style="width: 78%;" autocomplete="off" name="start_time" id="start_time">
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <label for="" style="width: 12%;text-align: right;">截&nbsp;&nbsp;止&nbsp;日：</label>
                        <input name="end_time" id="end_time" type="text" autocomplete="off" style="width: 78%;">
                    </div>

                    <div style="width: 100%;margin-top: 10px;">
                        <label for="" style="width: 12%;text-align: right;vertical-align: center;">描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述：</label>
                        <textarea name="" id="describe" cols="30" rows="3" style="width: 78%;outline: none;"></textarea>
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <label for="" style="width: 12%;text-align: right;">提醒方式：</label>
                        <input id="" name="ReminderMethod" value="1" type="radio" checked>  短信
                        <input id="" name="ReminderMethod" value="2" type="radio" style="margin-left: 15px;">  站内信
                    </div>
                    <div style="width: 100%;margin-top: 10px;">
                        <label for="" style="width: 12%;text-align: right;">上传合同：</label>
                        <a href="javascript:;" class="file" style="vertical-align: top;">
                            上传合同【PDF】
                            <input type="file" name="party_main_body" id="party_main_body" onchange="upload_accessory()">
                        </a>
                    </div>
                    <div style="width: 91%;height: 150px;border: #cccccc dashed 1px;margin-top: 10px;text-align: center;">
                        <object id="pdf_tag" type="application/pdf" width="100%" height="100%"></object>
                    </div>
                </div>
                <hr>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button id="summit_button" onclick="summitData()" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%;height: 95.5%;background: white;padding-top: 20px;overflow: auto;">
        <div style="width: 100%;height: 260px;padding-left: 50px;padding-top: 20px;" id="seal_card_list">
            {% for foo in obj %}
                <div class="seal_card_one">
                    <div class="seal_card_two">
                        <a href="{{ foo.contract_path }}" target="_blank"><img src="../../static/public_file/images/合同签订.png" alt="" class="img_card"></a>
                    </div>
                    <div class="seal_card_three"></div>
                    <div class="seal_card_four">
                        <p><label for="">合同名称：</label> <span><a href="{{ foo.contract_path }}" target="_blank">{{ foo.contract_name }}</a></span></p>
                        <p><label for="">生&nbsp;效&nbsp;&nbsp;日：</label> <span>{{ foo.contract_effect }}</span></p>
                        <p><label for="">截&nbsp;止&nbsp;&nbsp;日：</label> <span>{{ foo.contract_off }}</span></p>
                        <p><label for="">描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 述：</label> <span>{{ foo.describe }}</span></p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#start_time', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#end_time', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        function online_tag() {
            document.getElementById("new_models1").style.display = "table-row";
        }

        function close_models() {
            document.getElementById("new_models1").style.display = "none";
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function upload_accessory() {
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            var files = document.getElementById("party_main_body").files[0];
            form.append("files", files);
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/UploadContract", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200) {
                            document.getElementById("pdf_tag").setAttribute("data", JsonDate["data"]["file_path"])
                        }else {
                            alert("请上传PDF文件");
                        }
                    }
                }
            };
        }

        function summitData() {
            var form = new FormData();
            var contract_name = document.getElementById("contract_name").value;
            var start_time = document.getElementById("start_time").value;
            var end_time = document.getElementById("end_time").value;
            var describe = document.getElementById("describe").value;
            var ReminderMethod = $("input[type=radio][name=ReminderMethod]:checked").val();
            var pdf_path = document.getElementById("pdf_tag").getAttribute("data");
            form.append("contract_name", contract_name);
            form.append("start_time", start_time);
            form.append("end_time", end_time);
            form.append("describe", describe);
            form.append("ReminderMethod", ReminderMethod);
            form.append("pdf_path", pdf_path);
            if (!contract_name) {
                alert("请输入合同名称！");
                return false
            }
            if (!start_time) {
                alert("请输入合同生效日！");
                return false
            }
            if (!end_time) {
                alert("请输入合同截止日！");
                return false
            }

            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/finance/ManagementEconomicContract.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200){
                            alert("上传成功！")
                        }
                        window.location.reload();
                    }
                }
             };
        }

        function search_contract() {
            var contract = document.getElementById("contract").value;
            window.location.href="/finance/ManagementEconomicContract.html?contract="+contract
        }
    </script>
{% endblock %}
